<template>
    <div class="publish">
        <van-popup v-model="showPicker" round position="bottom">
            <van-cascader
                v-model="category"
                title="请选择类别"
                :options="options"
                @close="onClose"
                @finish="onFinish"
            />
        </van-popup>
        <van-form validate-first>
            <van-field
                v-model="form.name"
                name="name"
                label="商品标题"
                placeholder="商品标题"
                :rules="[{ required: true, message: '请填写商品标题' }]"
            />
            <input hidden v-model="form.category_id">
            <van-field
                v-model="category"
                label="商品分类"
                placeholder="商品分类"
                :rules="[{ required: true, message: '请选择商品分类' }]"
                readonly
                clickable
                @click="showCategory"
            />

            <van-field
                v-model="form.desc"
                name="desc"
                label="商品描述"
                placeholder="商品简述"
                :rules="[{ required: true, message: '请填写商品简述' }]"
            />
            <van-field
                v-model="form.content"
                name="content"
                label="详细描述"
                placeholder="详细描述"
                :rules="[{ required: true, message: '请填写详细描述' }]"
            />
            <van-field
                v-model="form.price"
                name="price"
                label="商品价格"
                placeholder="商品价格"
                :rules="[{ validator: priceValid, message: '商品价格格式错误,整数或保留两位小数' }]"
            />
            <van-field
                v-model="form.num"
                name="num"
                label="商品数量"
                placeholder="商品数量"
                :rules="[{ validator: numValid, message: '商品数量格式错误,整数或保留两位小数' }]"
            />
            <div style="margin: 20px 0px">
                <label style="margin-right: 50px">上传图片</label>
                <van-uploader v-model="fileList" max-count="1" :after-read="afterRead"/>
            </div>

            <!--        <svg-icon icon-name="publish" class="publish-icon"></svg-icon>-->
<!--            <van-button @click="form=[]" class="publish-title" native-type="submit">重置</van-button>-->
            <van-button @click="publish" class="publish-title" native-type="submit" size="small" type="primary">发布</van-button>
        </van-form>
    </div>
</template>

<script>
import Vue from 'vue';
import {Icon, Uploader, Form, Field, Button} from 'vant';

import {Picker} from 'vant';
import {Popup} from 'vant';
import {addGoods, getOptions} from "../../api/goods";
import {uploadSingle} from "@/api/upload";

Vue.use(Popup);
Vue.use(Picker);
Vue.use(Uploader)
Vue.use(Icon);
Vue.use(Form);
Vue.use(Field);
Vue.use(Button)


export default {
    name: "publish",
    data() {
        return {
            img: "",
            fileList: [],
            form: {},
            showPicker: false,
            category: "",
            options: [
                {
                    text: '浙江省',
                    value: '330000',
                    children: [{text: '杭州市', value: '330100'}],
                },
                {
                    text: '江苏省',
                    value: '320000',
                    children: [{text: '南京市', value: '320100'}],
                },
            ],
        }
    },
    created() {

    },
    watch: {},
    computed: {},
    methods: {
        addCart() {
            console.log("add")
            this.$toast("添加商品")
        },
        async publish() {
            var goods = this.form
            goods["img"] = this.img
            var result = await addGoods(goods);
            if (result.state) {
                this.$toast(result.msg)
            } else {
                this.$toast(result.msg)
            }
        },
        priceValid(val) {
            return /^[1-9][\d]*([.][\d]{0,2})?$/.test(val)
        },
        numValid(val) {
            return /^[1-9][\d]*$/.test(val)
        },
        onConfirm(val, index) {
            this.showPicker = false
            // this.$toast(val + index)
            // this.$data.category = val
            this.form.category_id = index
        },
        async afterRead(file, content) {
            let formData = new FormData()
            formData.append("singleFile", file.file)
            let result = await uploadSingle(formData);
            this.utils.resultBool(result)
            this.img = result.url
        },
        onFinish({selectedOptions}) {
            this.showPicker = false
            console.log("selectedOptions", selectedOptions)
            this.category = selectedOptions.map((option) => option.text).join('/');
            this.form.category_id = selectedOptions.pop().value
        },
        async showCategory() {
            let result = await getOptions();
            this.options = this.utils.resultList(result)
            this.showPicker = true
        },
        onClose() {
        }
    }
}
</script>

<style lang="scss" scoped>
.publish-title {
    display: block;
    letter-spacing: 10px;
    margin: auto;
    font-family: "Microsoft YaHei UI";
    font-size: 20px;
}

.publish {
    width: 100%;
    height: 100%;
    text-align: center;
    margin-top: 20%;

}

.publish-icon {
    margin-top: 10%;
    width: 100px;
    height: 100px;
}
</style>
